{% extends 'base.html' %}
{% load static %}

{% block title %}我的设备 - 维修管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">我的设备</h1>
            
            <!-- 设备统计 -->
            <div class="row mb-4">
                <div class="col-md-3 col-6 mb-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body text-center">
                            <h5 class="card-title">总设备</h5>
                            <h2 class="card-text">{{ stats.total }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <div class="card bg-success text-white">
                        <div class="card-body text-center">
                            <h5 class="card-title">正常</h5>
                            <h2 class="card-text">{{ stats.active }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <div class="card bg-warning text-dark">
                        <div class="card-body text-center">
                            <h5 class="card-title">维修中</h5>
                            <h2 class="card-text">{{ stats.maintenance }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <div class="card bg-secondary text-white">
                        <div class="card-body text-center">
                            <h5 class="card-title">已报废</h5>
                            <h2 class="card-text">{{ stats.retired }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 搜索栏 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="get" class="row g-3 align-items-center">
                        <div class="col-md-8">
                            <input type="text" name="search" class="form-control" 
                                   placeholder="搜索设备名称、型号、序列号..." value="{{ search_query }}">
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                        </div>
                        <div class="col-md-2">
                            <a href="{% url 'assets:asset_list_mine' %}" class="btn btn-outline-secondary w-100">
                                <i class="bi bi-arrow-clockwise"></i> 重置
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 设备类型统计 -->
            {% if type_stats %}
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="mb-3">设备类型分布</h5>
                    <div class="d-flex flex-wrap gap-2">
                        {% for type_name, count in type_stats.items %}
                        <span class="badge bg-info text-dark p-2">
                            {{ type_name }}: {{ count }}台
                        </span>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- 操作按钮 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="mb-0">
                    设备列表
                    {% if search_query %}
                    <small class="text-muted">(搜索: "{{ search_query }}")</small>
                    {% endif %}
                </h5>
                <a href="{% url 'assets:asset_create' %}" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> 添加新设备
                </a>
            </div>

            <!-- 设备列表 -->
            {% if assets %}
            <div class="row">
                {% for asset in assets %}
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header d-flex justify-content-between align-items-center bg-light">
                            <h6 class="card-title mb-0 text-truncate" title="{{ asset.name }}">
                                <i class="bi bi-pc-display me-1"></i>{{ asset.name }}
                            </h6>
                            <span class="badge bg-{% if asset.status == 'active' %}success{% elif asset.status == 'maintenance' %}warning{% else %}secondary{% endif %}">
                                {{ asset.get_status_display }}
                            </span>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <small class="text-muted">设备编号: {{ asset.code|default:"未设置" }}</small>
                                <span class="badge bg-info">{{ asset.get_asset_type_display }}</span>
                            </div>
                            
                            <div class="mb-3">
                                <p class="card-text mb-1">
                                    <strong><i class="bi bi-tag me-1"></i>型号:</strong> 
                                    <span class="text-muted">{{ asset.model|default:"未设置" }}</span>
                                </p>
                                <p class="card-text mb-1">
                                    <strong><i class="bi bi-upc-scan me-1"></i>序列号:</strong> 
                                    <span class="text-muted">{{ asset.serial_number|default:"未设置" }}</span>
                                </p>
                                <p class="card-text mb-1">
                                    <strong><i class="bi bi-calendar me-1"></i>购买日期:</strong> 
                                    <span class="text-muted">{{ asset.purchase_date|date:"Y-m-d"|default:"未设置" }}</span>
                                </p>
                                {% if asset.warranty_expiry %}
                                <p class="card-text mb-1">
                                    <strong><i class="bi bi-shield-check me-1"></i>保修到期:</strong> 
                                    <span class="text-muted">{{ asset.warranty_expiry|date:"Y-m-d" }}</span>
                                </p>
                                {% endif %}
                            </div>
                            
                            {% if asset.notes %}
                            <div class="border-top pt-2 mt-2">
                                <small class="text-muted">
                                    <strong>备注:</strong> {{ asset.notes|truncatewords:8 }}
                                </small>
                            </div>
                            {% endif %}
                        </div>
                        <div class="card-footer bg-transparent border-top-0">
                            <div class="d-grid gap-2 d-md-flex justify-content-between">
                                <a href="{% url 'assets:asset_detail' asset.pk %}" class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-eye"></i> 详情
                                </a>
                                <a href="{% url 'assets:asset_edit' asset.pk %}" class="btn btn-outline-secondary btn-sm">
                                    <i class="bi bi-pencil"></i> 编辑
                                </a>
                                <span class="badge bg-light text-dark align-self-center">
                                    <i class="bi bi-clock-history me-1"></i>{{ asset.updated_at|date:"m-d" }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-5">
                <div class="text-muted">
                    <i class="bi bi-pc-display" style="font-size: 3rem;"></i>
                    <h4 class="mt-3">暂无设备</h4>
                    <p>您还没有添加任何设备，点击"添加新设备"开始管理您的设备。</p>
                    <a href="{% url 'assets:asset_create' %}" class="btn btn-primary mt-2">
                        <i class="bi bi-plus-circle"></i> 添加新设备
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
